<template>
  <div class="content">
    <NavBar goUrl="/my"></NavBar>
    <div class="c-mnhldr-search flex-row flex-align-center">
      <van-field
        v-model="search"
        placeholder="请输入保单号/投被保人/产品/订单号"
      >
        <template #left-icon>
          <van-icon name="search" size="18px" color="#666" />
        </template>
      </van-field>
      <div class="c-mnhldr-search-btn" @click="hundleSearch">搜索</div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="orderList-card"
        v-for="item in orderList"
        :key="item.index"
        @click="hundleJump(item)"
      >
        <div class="orderList-title">
          <div class="orderList-line"></div>
          <div class="orderList-id">订单号:{{ item.orderNo }}</div>
          <div
            class="orderList-label"
            v-show="item.reinsuranceFlag == 'N' ? false : true"
          >
            待续保
          </div>
          <div
            class="orderList-label"
            v-show="item.renewalFlag == 'N' ? false : true"
          >
            待续期
          </div>
          <div class="orderList-state">{{ item.orderStatusName }}</div>
        </div>
        <div class="orderList-br"></div>
        <div class="orderList-content">
          <div class="orderList-online">
            <div class="orderList-user">投保人</div>
            <div class="orderList-name">{{ item.policyHolderName }}</div>
          </div>
          <div class="orderList-online">
            <div class="orderList-user">产品名称</div>
            <div class="orderList-name">
              {{ item.productName }}
            </div>
          </div>
          <div class="orderList-online">
            <div class="orderList-user">交费方式</div>
            <div class="orderList-name">{{ item.payWayName }}</div>
          </div>
        </div>
        <div class="orderList-br"></div>
        <div class="orderList-foot">
          <div class="orderList-date">投保日期:{{ item.applicationDate }}</div>
          <div class="orderList-money">保费:{{ item.annualPrem }}元</div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import API from '@/services/h5/my'
import { isWeChatBrowser } from '@/config/h5/index.js'
export default {
  components: { NavBar },
  data() {
    return {
      value: '',
      currentPage: 0,
      length: 10,
      orderList: [],
      loading: false,
      finished: false,
      total: 0,
      search: ''
    }
  },
  methods: {
    handleGoTo(item) {
      let queryItem = {
        contractId: item.contractId
      }
      isWeChatBrowser && (queryItem.productName = item.productName)
      this.$router.push({
        path: item.isCarFlag == 'Y' ? `/car` : '/productOffline',
        query: {
          ...queryItem
        }
      })
    },
    hundleJump(item) {
      if (item.orderStatus === '24') {
        this.$dialog
          .confirm({
            title: '退回原因',
            message: item.auditRemark,
            showCancelButton: false
          })
          .then(() => {
            this.handleGoTo(item)
          })
        return false
      }
      if (item.orderStatus === '00') {
        this.handleGoTo(item)
        return false
      }
      this.$router.push({ path: `/baodan/${item.contractId}` })
    },
    async onLoad() {
      this.currentPage += 1
      this.loading = true
      this.finished = false
      let params = {
        length: this.length,
        curPage: this.currentPage,
        orderNo: this.search
      }
      const res = await API.orderList(params)
      if (res && res.data && res.data.code === 1000) {
        this.orderList = this.orderList.concat(res.data.data.list)
        if (this.orderList.length < res.data.data.count) {
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
          return
        }
      }
      this.loading = false
    },
    hundleSearch() {
      this.currentPage = 0
      this.orderList = []
      this.onLoad()
    }
  },
  mounted() {}
}
</script>
<style scoped lang="less">
.content {
  background: #fafafa;
  .c-mnhldr {
    &-search {
      width: 345px;
      margin: 15px;
      .van-cell {
        padding-top: 4.5px;
        padding-bottom: 5.5px;
        height: 32px;
        border-radius: 17px 0 0 17px;
        border: 1px solid @c-color-primary;
      }
      &-img {
        width: 16px;
        height: 17px;
      }
      &-btn {
        width: 56px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 13px;
        color: #fff;
        border-radius: 0 17px 17px 0;
        background: @c-color-primary;
      }
    }
  }
  .orderList-card {
    width: 345px;
    margin: 0 auto;
    margin-bottom: 15px;
    padding: 5px 0;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.07) 0 0 8px 0;
    position: relative;
    .orderList-title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      .orderList-line {
        width: 2.5px;
        height: 14px;
        border-radius: 0 50px 50px 0;
        background-color: @c-color-primary;
      }
      .orderList-id {
        font-size: 13px;
        margin-left: 10px;
      }
      .orderList-label {
        width: 40px;
        height: 16px;
        color: @c-color-primary;
        border: 0.5px solid @c-color-primary;
        background-color: rgba(246, 134, 87, 0.2);
        border-radius: 2px;
        font-size: 10px;
        margin-left: 13px;
        text-align: center;
      }
      .orderList-state {
        font-size: 14px;
        color: @c-color-primary;
        position: absolute;
        right: 10px;
      }
    }
    .orderList-content {
      padding: 10px;
      .orderList-online {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        .orderList-user {
          font-size: 13px;
          color: #999;
          width: 100px;
        }
        .orderList-name {
          font-size: 13px;
          color: #666;
          text-align: right;
        }
      }
    }
    .orderList-br {
      width: 325px;
      height: 0.5px;
      margin: 0 auto;
      background-color: #f0f0f0;
    }
    .orderList-foot {
      padding: 10px 10px;
      display: flex;
      justify-content: space-between;
      .orderList-date {
        font-size: 12px;
        color: #999;
      }
      .orderList-money {
        font-size: 11px;
        color: #ec4001;
      }
    }
  }
}
</style>
